<template>
    <div style="width:95%;margin: 10px auto;">
        <el-row style="margin-left: 15px">
            <div id="tool">
                <el-button title="注册模型" type="primary" icon="el-icon-plus" circle @click="signDialog()"
                ></el-button>
                <el-button title="列表刷新" type="primary" icon="el-icon-refresh" circle @click="refresh()"></el-button>
            </div>
            <div>
                <!--<el-cascader-->
                <!--style="margin-left:10px;width:30%;"-->
                <!--:options="options"-->
                <!--change-on-select-->
                <!--ref="modelSelect"-->
                <!--v-model="val"-->
                <!--size="medium"-->
                <!--id="modelSelect"-->
                <!--&gt;</el-cascader>-->
                <!--<el-tree :data="options" :props="defaultProps" @node-click="handleNodeClick()"></el-tree>-->
            </div>
        </el-row>
        <el-row style="margin-left: 20%">
            <v-container grid-list-xl text-xs-center>
                <v-layout row wrap>
                    <v-flex xs12 sm6 md6 lg4 v-for="card in cards" :key="card.artifactId">
                        <v-modelCard :card="card" v-on:childRefresh="refresh"></v-modelCard>
                    </v-flex>
                </v-layout>
            </v-container>
        </el-row>
        <div style="background: #f6f8fb;width: 20%;margin-top: -10%;margin-left: -4%;border-right: 1px solid #ddd;margin-bottom: -20%">
            <el-row style="height:800px">
                <el-tree
                        style="margin-top: 15%;background: #f6f8fb;margin-left:8%;"
                        :data="options"
                        :props="defaultProps"
                        highlight-current
                        default-expand-all
                        node-key="label"
                        @node-click="handleNodeClick"
                        ref="tree">
                </el-tree>
            </el-row>
        </div>
        <v-modelDialog ref="modelDialog"></v-modelDialog>
        <v-signDialog :sign-visible="signVisible" v-on:childRefresh="refresh"></v-signDialog>
        <v-modelInfoDialog></v-modelInfoDialog>
        <v_position :position-visible="positionVisible"></v_position>
        <v_fileDialog :file-visible="fileVisible"></v_fileDialog>
    </div>
</template>

<script>
    import modelCard from '../../components/card/modelCard.vue';
    import modelDialog from '../../components/dialog/modelDialog.vue';
    import signDialog from '../../components/dialog/signDialog.vue';
    import modelInfoDialog from '../../components/dialog/modelInfoDialog.vue';
    import positionDialog from '../../components/dialog/positionDialog';
    import FileDialog from '../../components/dialog/filePositionDialog';

    export default {
        name: "modelcompute",
        data() {
            return {
                cards: null,
                modalTitle: "",
                centerDialogVisible: false,
                isVisible: false,
                signVisible: {
                    v: false,
                },
                positionVisible:{
                    v:false
                },
                fileVisible:{
                    v:false
                },
                modelInfoVisible: false,
                val: [],
                options: [{
                    value: 'all',
                    label: '全部模型',

                }, {
                    value: '大数据统计',
                    label: '大数据统计',
                    children: [{
                        value: '空间数据可视化',
                        label: '空间数据可视化'
                    }, {
                        value: '属性数据可视化',
                        label: '属性数据可视化'
                    }, {
                        value: '时空事件可视化',
                        label: '时空事件可视化'
                    }]
                }, {
                    value: '文本数据分析',
                    label: '文本数据分析',
                    children: [{
                        value: '文本解析',
                        label: '文本解析'
                    }, {
                        value: '位置信息处理',
                        label: '位置信息处理'
                    }, {
                        value: '位置语义分析',
                        label: '位置语义分析'
                    }]
                }, {
                    value: '遥感数据分析',
                    label: '遥感数据分析',
                    children: [{
                        value: '图像分类',
                        label: '图像分类'
                    }, {
                        value: '目标识别',
                        label: '目标识别'
                    }, {
                        value: '图谱分析',
                        label: '图谱分析'
                    }]
                }, {
                    value: '通用基础分析',
                    label: '通用基础分析',
                    children: [{
                        value: '空间数据操作',
                        label: '空间数据操作'
                    }, {
                        value: '时空聚类/分类',
                        label: '时空聚类/分类'
                    }, {
                        value: '空间回归分析',
                        label: '空间回归分析'
                    }, {
                        value: '空间关联分析',
                        label: '空间关联分析'
                    }, {
                        value: '时空网络分析',
                        label: '时空网络分析'
                    }]
                }, {
                    value: '轨迹数据分析',
                    label: '轨迹数据分析',
                    children: [{
                        value: '特征分析',
                        label: '特征分析'
                    }, {
                        value: '相似性分析',
                        label: '相似性分析'
                    }, {
                        value: '轨迹聚类',
                        label: '轨迹聚类'
                    }]
                }, {
                    value: '时空事件分析',
                    label: '时空事件分析',
                    children: [{
                        value: '地理事件时空格局挖掘',
                        label: '地理事件时空格局挖掘'
                    }, {
                        value: '地理事件热点与异常挖掘',
                        label: '地理事件热点与异常挖掘'
                    }, {
                        value: '地理事件的模拟与预警',
                        label: '地理事件的模拟与预警'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label:
                        'label'
                }
            }
        }
        ,
        // watch: {
        //     val: function (val, oldVal) {
        // let valname='';
        // for(let value of val){
        //     valname=valname+'.'+value;
        // }
        // if(valname.length>0){
        //     valname=valname.substr(1);
        // }
        // console.log(valname)
        // this.getModelData(valname);
        //     }
        // },
        components: {
            "v-modelCard":
            modelCard,
            "v-modelDialog":
            modelDialog,
            "v-signDialog":
            signDialog,
            "v-modelInfoDialog":
            modelInfoDialog,
            "v_position":
            positionDialog,
            "v_fileDialog":
            FileDialog
        }
        ,
        methods: {
            getModelData: function (val) {
                let obj = this;
                this.$axios.get(
                    // params:{ userid: "userid"},
                    //  'http://192.168.240.25:3000/dldsj/parallel/get',
                    '/parallel/get')
                    .then(res => {
                        this.cards = [];
                        if (val == undefined || val == 'all') {
                            obj.cards = res.body;
                        } else {
                            for (let card of res.body) {
                                if (card.usage.startsWith(val)) {
                                    this.cards.push(card)
                                }
                            }
                        }
                        this.cards.forEach(model => {
                            model.picPath = this.$serverUrl + model.picPath;
                        });
                    }).catch(function () {
                    console.log(error);
                })
            },
            handleNodeClick(data) {
                if (data.label === '全部模型') {
                    this.getModelData('');
                    return;
                }
                let path = this.$refs.tree.getNodePath(data);
                let valname = '';
                for (let node of path) {
                    valname = valname + '.' + node.label;
                }
                if (valname.length > 0) {
                    valname = valname.substr(1);
                }
                this.getModelData(valname);
            }
            ,
            refresh: function () {
                let obj = this;
                this.val = [];
                this.$axios.get('/parallel/get')
                    .then(res => {
                        obj.cards = res.body;
                        obj.cards.forEach(model => {
                            model.picPath = this.$serverUrl + (model.picPath || 'static/img/default.png');
                        })
                    })
                    .catch(function () {
                        obj.$message.error('刷新失败!');
                    })
            },
            signDialog: function () {
                this.signVisible.v = true
            },
        }
        ,
        mounted: function () {
            this.getModelData()
        }
        ,
    }
</script>

<style>
    #tool {
        padding: 0 10px 0 0;
        float: right;
    }
  .el-tree-node__content:hover{
    color: #3a8ee6;
  }
</style>
